<template>
  <!-- local 属性控制控件的语言，例如 NDatePicker 默认的 placehold 为 "Select Date"，修改后变为 "选择时间" -->
  <!-- date-locale 表示日期是否本地化，例如默认的 NDatePicker 日期 "Feb 2023" 将变为 "2月2023" -->
  <n-config-provider
    class="h-full"
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="theme.themeOverrides"
    :theme="dark"
  >
    <!-- 如果你想使用加载条，你需要把调用其方法的组件放在 n-loading-bar-provider 内部并且注入 loadingBar -->
    <n-loading-bar-provider>
      <!-- 如果你想使用对话框，你需要把调用其方法的组件放在 n-dialog-provider 内部并且使用 useDialog 去获取 API -->
      <n-dialog-provider>
        <!-- 如果你想使用通知，你需要把调用其方法的组件放在 n-notification-provider 内部并且使用 useNotification 来获取 API -->
        <n-notification-provider>
          <!-- 如果你想使用信息，你需要把调用其方法的组件放在 n-message-provider 内部并且使用 useMessage 去获取 API -->
          <n-message-provider>
            <slot></slot>
            <app-provider-content></app-provider-content>
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/store'
import { computed } from 'vue'
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
import { AppProviderContent } from '@/components'

const theme = useThemeStore()
const dark = computed(() => (theme.darkMode ? darkTheme : undefined))
</script>

<style scoped></style>
